<template>
  <div id="experimentDatas">
    <el-card class="box-card" style="margin:15px">
      <el-form :model="basicData" ref="basicForm" size="small" :rules="basicDataRules">
        <el-row>
          <el-col :span="5">
            <el-form-item label="实验项目:" prop="code" class="left-class">
              <el-select
                size="mini"
                v-model="basicData.code"
                placeholder="选择"
                @change="selectPojeck"
              >
                <el-option
                  v-for="(item, key, index) in dicts.EXPERIMENT_CODE"
                  :key="index"
                  :label="item"
                  :value="key"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="padding-left:30px">
            <el-form-item label="实验日期:" prop="date" class="right-class">
              <el-date-picker
                size="mini"
                :format="dateTimeFormat"
                @focus="basicData.date = ''"
                v-model="basicData.date"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="日期选择"
              />
            </el-form-item>
          </el-col>
          <el-col :span="7" style="padding-left:30px">
            <el-form-item>
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-folder-checked"
                @click="getList(basicData)"
                style="width:120px"
              >查询</el-button>
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-folder-checked"
                @click="clickSync"
                :disabled="disabled"
                style="width:120px"
              >同步数据</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5" style="padding-left:10px">
            <el-form-item label="开始序号: " class="left-class">
              <el-input size="mini" v-model="formData.startcode" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12" style="padding-left:40px">
            <el-form-item label="实验编号:" class="right-class">
              <el-col :span="11">
                <el-input size="mini" v-model="formData.startExp" placeholder="输入" />
              </el-col>
              <el-col :span="2" style="display:flex;justify-content: center;">
                <span>至</span>
              </el-col>
              <el-col :span="11">
                <el-input size="mini" v-model="formData.endExp" placeholder="输入" />
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="7" style="padding-left:30px">
            <el-form-item>
              <el-button size="mini" type="primary" @click="clickFastExp" style="width:120px">快捷编号</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5" style="padding-left:10px">
            <el-form-item label="开始序号:" class="left-class">
              <el-input size="mini" v-model="formData.startcode1" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12" style="padding-left:40px">
            <el-col :span="12">
              <el-form-item label="实验批号:" class="left-class">
                <el-select
                  size="mini"
                  v-model="formData.piCode"
                  placeholder="选择"
                  @change="selectCode"
                >
                  <el-option
                    v-for="(item, key, index) in piCodeList"
                    :key="index"
                    :label="item.batchNumber"
                    :value="item.batchNumber"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="孔号:" class="right-class" label-width="60px">
                <el-col :span="11">
                  <el-input size="mini" v-model="piItem.minPosNumber" placeholder="输入" />
                </el-col>
                <el-col :span="2" style="display: flex;justify-content: center;">
                  <span>至</span>
                </el-col>
                <el-col :span="11">
                  <el-input size="mini" v-model="piItem.maxPosNumber" placeholder="输入" />
                </el-col>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="7" style="padding-left:30px">
            <el-form-item>
              <el-button size="mini" type="primary" @click="clickExp" style="width:120px">编号</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- 中间 -->
      <div style="margin-bottom:10px;display:flex">
        <el-button
          size="small"
          type="primary"
          icon="el-icon-document-checked"
          @click="clickUpdateData"
        >上报数据</el-button>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-document-checked"
          @click="clickRestExp"
        >清空编号</el-button>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-document-checked"
          @click="clickRestPan"
        >重判</el-button>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%;padding:5px;"
        :header-cell-style="{
          background: '#333333',
          color: '#ffffff',
          textAlign: 'center'
        }"
        @selection-change="selectChanage"
      >
        <el-table-column align="center" type="selection" width="55" v-if="titleTrue" />
        <el-table-column
          align="center"
          :prop="key"
          :label="item"
          v-for="(item,key,index) in title"
          :key="index"
          width="120px"
        />
      </el-table>
    </el-card>
  </div>
</template>

<script>
import DeliveryManageApi from "@/api/DeliveryManage.js";
import { initDicts } from "@/utils/commons";

export default {
  data() {
    return {
      // 实验日期输入格式
      dateTimeFormat: "MMdd",
      // 转菊花
      loading: false,
      // 同步按钮
      disabled: false,
      // 表格是否有数据
      titleTrue: false,
      // 表格数据
      tableData: [],
      // 表格标题
      title: [],
      // 选中数据
      selectList: [],
      // 数据上报数据
      expListData: {
        endExpNum: "",
        experimentCode: {
          data: "",
          key: ""
        },
        experimentDate: "",
        experimentSwatchId: "",
        seq: 1,
        startExpNum: ""
      },
      // 查询数据
      basicData: {
        code: "",
        date: ""
      },
      basicDataRules: {
        code: [{ required: true, message: "  ", trigger: "change" }],
        date: [{ required: true, message: "  ", trigger: "change" }]
      },
      // 表单数据
      formData: {
        startcode: "",
        startExp: "",
        endExp: "",
        startcode1: "",
        piCode: "",
        kcodeStart: "",
        kcodeEnd: ""
      },
      piCodeList: [],
      // 编码区间
      codeList: [],
      // 总数
      total: 0,
      // 字典
      dicts: {
        EXPERIMENT_CODE: {
          THA: "地贫"
        } //实验项目
      },
      piItem: {
        batchNumber: "",
        experimentSwatchId: "",
        maxPosNumber: "",
        minPosNumber: ""
      }
    };
  },
  mounted() {
    // initDicts(["EXPERIMENT_CODE"], this.dicts);
  },
  methods: {
    // 实验日期输入
    changeDateTime(v, type) {
      this.basicData.date = v;
      if (this.basicData.date) {
        this.dateTimeFormat = "yyyy-MM-dd";
      } else {
        this.dateTimeFormat = "MMdd";
      }
    },
    // 点击编号
    clickExp() {
      if (this.basicData.code == "") {
        this.$message.error("请先选择项目");
        return;
      }
      if (this.formData.startcode1 == "") {
        this.$message.error("请填写开始序号");
        return;
      }
      if (this.formData.piCode == "") {
        this.$message.error("请先选择批号");
        return;
      }
      // let codeList = [];
      // for (
      //   let index = this.formData.startExp;
      //   index <= this.formData.endExp;
      //   index++
      // ) {
      //   codeList.push(Number(index));
      // }
      this.tableData.forEach((item, index) => {
        if (item.seq == this.formData.startcode1) {
          this.codeList.forEach((ci, cn) => {
            let data = this.tableData[index + cn];
            data.expNum = ci.expNum.toString();
            this.$set(this.tableData, index + cn, data);
          });
        }
      });
    },
    // 快捷编号
    clickFastExp() {
      if (this.formData.startCode == "") {
        this.$message.error("请填写开始序号");
        return;
      }
      if (this.formData.startExp == "") {
        this.$message.error("请填写开始实验编号");
        return;
      }
      if (this.formData.endExp == "") {
        this.$message.error("请填写结束实验编号");
        return;
      }
      let codeList = [];
      for (
        let index = this.formData.startExp;
        index <= this.formData.endExp;
        index++
      ) {
        codeList.push(Number(index));
      }
      this.tableData.forEach((item, index) => {
        if (item.seq == this.formData.startcode) {
          codeList.forEach((ci, cn) => {
            let data = this.tableData[index + cn];
            data.expNum = ci.toString();
            this.$set(this.tableData, index + cn, data);
          });
        }
      });
    },
    // 选择批号
    selectCode(v) {
      let code = {};
      this.piCodeList.forEach((item, index) => {
        if (item.batchNumber == this.formData.piCode) {
          code = item;
        }
      });
      this.piItem = {
        batchNumber: code.batchNumber,
        experimentSwatchId: code.experimentSwatchId,
        maxPosNumber: code.maxPosNumber,
        minPosNumber: code.minPosNumber
      };
      DeliveryManageApi.experimentData
        .queryExpNumByMinMax(this.piItem)
        .then(res => {
          this.codeList = res.data.data;
        });
    },
    // 选择项目
    selectPojeck(v) {
      DeliveryManageApi.experimentData
        .queryBatchNumberWithMinMax(v)
        .then(res => {
          this.piCodeList = res.data.data;
        });
    },
    // 点击同步
    clickSync() {
      if (this.basicData.code == "") {
        this.$message.error("请选择项目");
        return;
      }
      if (this.basicData.date == "") {
        this.$message.error("请选择日期");
        return;
      }
      this.disabled = true;
      DeliveryManageApi.experimentData.sync(this.basicData).then(res => {
        if (res.status == 200) {
          setTimeout(() => {
            this.$message({
              message: res.statusText,
              type: "success"
            });
            this.disabled = false;
            this.getList(this.basicData);
          }, 2000);
        } else {
          this.$message.error(res.statusText);
        }
      });
    },
    // 清空编号
    clickRestExp() {
      if (this.selectList.length == 0) {
        this.$message.error("请选择要清空编号的数据");
        return;
      }
      let ids = [];
      this.selectList.forEach((item, index) => {
        ids.push(item.id);
        item.expNum = "";
        this.tableData.forEach((ti, tn) => {
          if (item.seq == ti.seq) {
            ti.expNum = "";
            this.$set(this.tableData, index, ti);
          }
        });
      });

      DeliveryManageApi.experimentData.cleanExpNum(ids).then(res => {
        if (res.status == 200) {
          this.getList(this.basicData);
          this.$message({
            type: "success",
            message: res.statusText
          });
        } else {
          this.$message.error(res.statusText);
        }
      });
    },
    // 点击重判
    clickRestPan() {
      if (this.selectList.length == 0) {
        this.$message.error("请选择要重判的数据");
        return;
      }
      let ids = [];
      this.selectList.forEach((item, index) => {
        ids.push(item.id);
      });
      DeliveryManageApi.experimentData.interpretation(ids).then(res => {
        if (res.status == 200) {
          this.getList(this.basicData);
          this.$message({
            type: "success",
            message: res.statusText
          });
        } else {
          this.$message.error(res.statusText);
        }
      });
    },
    // 上报数据
    clickUpdateData() {
      if (this.tableData.length == 0) {
        this.$message.error("请先查询！");
        return;
      }
      if (this.selectList.length == 0) {
        this.$message.error("请选择数据！");
        return;
      }
      DeliveryManageApi.experimentData
        .saveExperimentData(this.selectList)
        .then(res => {
          if (res.status == 200) {
            this.$message({
              message: res.statusText,
              type: "success"
            });
            this.getList(this.basicData);
          } else {
            this.$message.error(res.statusText);
          }
        });
    },
    // 获取数据
    getList(data) {
      this.$refs["basicForm"].validate(valid => {
        if (valid) {
          this.loading = true;
          DeliveryManageApi.experimentData
            .querySyncResults(data)
            .then(res => {
              if (res.status === 200) {
                this.tableData = res.data.data.list ? res.data.data.list : [];
                this.title = res.data.data.title ? res.data.data.title : "";
                this.titleTrue = true;
              } else {
                this.$message.error(res.statusText);
              }
            })
            .finally(() => (this.loading = false));
        } else {
          return;
        }
      });
    },
    // 选中数据操作
    selectChanage(v) {
      this.selectList = v;
    },
    // 删除数据
    clickDelete() {
      if (this.selectList.length == 0) {
        this.$message.error("请选择要删除的数据");
        return;
      }
      // 加删除验证
      this.$confirm(`是否删除${this.selectList.length}条数据?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.selectList.forEach(item => {
          DeliveryManageApi.experimentData
            .delete({
              "ids[]": item.id
            })
            .then(res => {
              this.getList(this.basicData);
            });
        });
      });
    }
  },
  watch: {
    "basicData.date": function(v) {
      this.changeDateTime(v);
    }
  }
};
</script>
<style lang="less">
#experimentDatas {
  // @media screen and (max-width: 1400px) {
  .el-form-item__content {
    display: flex;
    flex-direction: row;
    justify-content: start;
  }

  .left-class {
    .el-select,
    .el-input {
      width: 100%;
      // margin-right: 4%;
    }
  }
  .right-class {
    .el-form-item__content {
      display: flex;
      flex-direction: row;
      .el-select,
      .el-input {
        width: 100%;
      }
    }
  }
  // }
}

#experimentData-dialog {
  display: flex;
  justify-content: center;
  align-items: center;
  .el-dialog {
    margin-top: 0 !important;
  }
  .el-message-box__message {
    width: 280px;
    overflow: hidden;
    white-space: normal;
    word-break: break-all;
  }
  #ban-table-tow {
    .el-table__body-wrapper {
      height: 200px !important;
      overflow-y: auto;
    }
  }
  .el-dialog__title {
    color: #fff;
  }
  .el-form-item__content {
    width: 80%;
    .el-select {
      width: 100%;
    }
    .el-date-editor {
      width: 100%;
    }
  }
}
</style>